<template>
  <div class="view-wrap">
    <div class="header">
      <div class="name">文件名：<span class="real-name">{{ realName || fileName }}</span></div>
      <Button v-if="!imageSrc && !videoSrc" @click="download">下载</Button>
    </div>
    <div v-if="!imageSrc && !videoSrc" id="view" ref="view" class="view" />
    <div v-if="imageSrc" class="view">
      <img :src="imageSrc" alt="">
    </div>
    <div v-if="videoSrc" class="view">
      <video :src="videoSrc" controls="true" />
    </div>
  </div>
</template>

<script>
import renderExcel from './xlsxView/index'
import renderWord from './wordView/index'
import renderPdf from './pdfView/index'

import { types } from '../filePreview/FilePreview'
import {
  getFile
} from './FilePreview'

export default {
  props: {
    fileName: {
      type: String,
      required: true
    },
    realName: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      imageSrc: '',
      videoSrc: ''
    }
  },
  async created() {
    console.log(this.fileName)
    console.log(this.realName)
    this.init()
  },
  methods: {
    async init() {
      this.$loading.show()
      const baseUrl = this.$baseInfo.BASE_URL
      const len = baseUrl.length
      const exetendName = this.getExtend(this.fileName)
      const hasRender = types.find(i => i[1] === exetendName)
      if (hasRender && hasRender[2]) {
        const res = await this._getFile()
        if (res) {
          const target = types.find(i => i[0] === res.type)
          switch (target[2]) {
            case 'renderExcel':
              renderExcel(res, '#view')
              break
            case 'renderWord':
              renderWord(res, this.$refs.view)
              break
            case 'renderPdf':
              renderPdf(res, '#view')
              break
            case 'renderImage':
              renderImage(res, '#view')
              break
            case 'renderVideo':
              renderVideo(res, this.$refs.view)
              break
          }
        }
      } else if (hasRender && hasRender[3] === 'image') {
        this.imageSrc = baseUrl[len - 1] === '/' ? baseUrl + 'upload/' + this.fileName : baseUrl + '/upload/' + this.fileName
      } else if (hasRender && hasRender[3] === 'video') {
        this.videoSrc = baseUrl[len - 1] === '/' ? baseUrl + 'upload/' + this.fileName : baseUrl + '/upload/' + this.fileName
      } else if (hasRender && hasRender[3] === 'txt') {
        const res = await this._getFile()
        const file = new FileReader()
        file.readAsText(res, 'utf-8')
        file.onload = () => {
          const txt = document.createTextNode(file.result)
          const pre = document.createElement('pre')
          pre.classList.add('txt')
          pre.appendChild(txt)
          this.$refs.view.appendChild(pre)
        }
      } else {
        this.$message.warning('暂不支持当前文件预览')
      }
      this.$loading.hide()
    },
    async _getFile() {
      try {
        const { data } = await getFile(this.fileName)
        if (data) return data
        return false
      } catch (error) {
        this.$loading.hide()
        return error
      }
    },
    getExtend(name) {
      const dot = name.lastIndexOf('.')
      return name.substr(dot + 1)
    },
    download() {
      const baseUrl = this.$baseInfo.BASE_URL
      const len = baseUrl.length
      const url = baseUrl[len - 1] === '/' ? baseUrl + 'upload/' + this.fileName : baseUrl + '/upload/' + this.fileName
      window.open(url, '_blank')
    }
  }
}
</script>
<style lang="less" scoped>
.view-wrap{
  height: 100%;
  width: 100%;
}
.header{
  height: 36px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ccc;
  padding-bottom: 8px;
  margin-bottom: 8px;
}
.name{
  height: 100%;
  display: flex;
  align-items: center;
  .real-name{
    font-weight: bold;
  }
}
.view{
  height: calc(100% - 44px);
  overflow-y: auto;
}
:deep(.txt){
  margin: 0;
  font-size: 12px;
  font-family: PingFang SC;
}
</style>
